<template>
	<view class="me">
		<text @click="del" class="iconfont icon-shezhi"></text>
		
		<view class="wei" v-if="!userdata.username">
			
			<form @submit="formSubmit" @reset="formReset">
				 <input maxlength="10" name="username" type="text" value="" placeholder="用户名" />
				  <input maxlength="20" name="password" type="password" value="" placeholder="密码" />
				<button size="mini" form-type="submit">登录/注册</button>
				<button size="mini" form-type="reset">重置</button>
			</form>
			<button size="mini" type="default" open-type="getUserInfo" @getuserinfo="getuserinfo">微信快速登录</button>
			
			<!-- 获取的都是微信的，bug -->
			<!-- <button size="mini" type="default"  @click="getuser('qq')">QQ快速登录</button>
			<button size="mini" type="default"  @click="getuser('sinaweibo')">微博快速登录</button> -->
		</view>
		
		<view class="deng" v-else>
			<image :src="userdata.userimg" mode="widthFix"></image>
			<text class="textname">{{userdata.username}}</text>
		</view>
		
	</view>
</template>

<script>
	import { request } from "../../request/index.js"
	export default{
		data(){   
			return{
				userdata:{
					id:0,
					username:"",
					userimg:"http://127.0.0.1:3000/public/images/touxiang.jpg",
					password:"",
					gender:1,  //默认男
				}
			}
		},
		onShow(){
			// console.log("ok")
			let userdata1=uni.getStorageSync("userinfo")
			console.log()
			if(userdata1==""){
				return 
			}
			this.userdata=userdata1
			if(!this.userdata.username){
				// this.userdata.username=""
				if(!this.userdata.userimg) 
				return	this.userdata["userimg"]="http://127.0.0.1:3000/public/images/touxiang.jpg"
			}
			// this.userdata.userimg=userdata.userimg
		},
		methods:{
			//多端登录
			getuser(e){
				uni.login({
					provider:e,
					success:(res)=>{
						// console.log(res)
						uni.getUserInfo({
							provider:e,
							success:(res)=>{
								console.log(res)
							}
						})
					}
				})
				
			},
			//推出登录
			del(){
				// console.log("heo")
				uni.redirectTo({
					url:"/pages/me/meinfo"
				})
			},
			// 直接注册,登录
			 formSubmit: function(e) {
			                var formdata =e.detail.value
							uni.request({
								url:"http://127.0.0.1:3000/user/reg",
								data:{
									"username":formdata.username,
									"password":formdata.password		
								},
								method:'POST',	  
								success:(res)=>{
									console.log(res.data)
									if(res.data.status==204){
										uni.showToast({
											title:"密码错误",
											duration:2000  
										})
									}
									this.userdata=res.data.data[0]
									
									// //如果没有头像，使用默认头像
									// if(!this.userdata.userimg){
									// 	this.userdata.userimg="http://127.0.0.1:3000/public/images/touxiang.jpg"
									// } 
									
									uni.setStorageSync("userinfo",this.userdata)	
								}
							})
			        
			            },
						
			//清空表单
			formReset: function(e) {
			    console.log('清空数据')
			},		
			            
			
			//微信登录
			getuserinfo(e){
				let json1=JSON.parse(e.detail.rawData)
				// console.log(e.detail)
				// console.log(json1.nickName)
				// console.log(json1.avatarUrl)
				console.log(json1)
				console.log(this.userdata)
				
				//零时方法
				this.userdata["username"]=json1.nickName
				this.userdata["userimg"]=json1.avatarUrl 
				uni.setStorageSync("userinfo",this.userdata)					      
			}
			
		}
	} 
</script>

<style lang="less" scoped>
	.me{
		width: 100vw;
		min-height: 100vh;
		position: relative;
		.icon-shezhi{
			position: absolute;
			top: 60upx;
			right: 40upx;
			font-size: 60upx;
			color: #4CD964;
		}
		
		.wei{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 400upx;
			height: 600upx;
			transform: translate(-50%,-50%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			form{
				margin-bottom: 60upx;
				input{
					border-bottom: 1px solid #ccc;
					margin-top: 20upx;
				}
				button{
					margin-top: 20upx;
					margin-right: 14upx;
				}
			}
			
		}
		.deng{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 400upx;
			height: 300upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			image{
				width:200upx;
				height: 200upx;
				border-radius: 50%;
			}
			.textname{
				display: block;
				text-align: center;
				width: 200upx;
				height: 60upx;
			}
			
		}
		
	}
</style>
